<template>
	<div class="after-detail bg-f5">
		<header class="header container bg-white border-b20" v-if="data">
			<h3 class="fs13 pt20 pb20 border-b" v-if="data.order">订单号：{{ data.order.order_no }}</h3>
			<div class="pt20 pb20 layout-juscon" v-if="data.order_item">
				<img class="mr15 responsive-img img-bg" :src="data.order_item.goods_picture" alt="" style="width:100px;height:85px;">
				<div class="flex_1">
					<p class="fs16 black ellipsis" style="width: 12rem">{{ data.order_item.goods_name }}</p>
					<p class="c999 fs12 layout pt10 pb10">规格：{{ data.order_item.sku_name }} <span>数量:{{ data.order_item.num }}</span></p>
					<strong class="subject fs16"><i class="fs14">￥</i>{{ data.order_item.price }}</strong>
				</div>
			</div>
		</header>
		<section class="bg-white">
			<ul class="container list">
				<li class="border-b pt20 pb20 fs14 black">售后状态：
					<i style="color:#ff7b1a;">
						<!-- 状态 1.审核中 2.售后中(审核通过) 3.拒绝换货(审核失败)4.处理中(用户发货) 5.退货中(商家发货) 6.已完成 -->
						<template v-if="data.status == 1">
							审核中
						</template>
						<template v-if="data.status == 2">
							售后中
						</template>
						<template v-if="data.status == 3">
							拒绝换货
						</template>
						<template v-if="data.status == 4">
							处理中
						</template>
						<template v-if="data.status == 5">
							退货中
						</template>
						<template v-if="data.status == 6">
							已完成
						</template>
					</i>
				</li>
				<li class="pt20 pb20 fs14 blac" v-if="data.seller_shipping_company">{{ data.seller_shipping_company }}运单号：{{ data.seller_shipping_no }}</li>
			</ul>
		</section>
		<footer class="pos-fix full-width bg-subject bottom0 align-center pt15 pb15">
			<div class="flex-center align-center">
				<img class='kefu' src="../../../assets/icon23.png" alt="">
				<span class="white fs15 ml5">在线客服</span>
			</div>
		</footer>
	</div>
</template>

<script>
	export default{
		data()
		{
			return{
				data     : [],

			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/exchange/details',{ params : { order_item_id : this.$route.query.id }}).then( res => {
					this.data = res.data;
				})
			}
		}
	}
</script>

<style lang="less">
	.after-detail{
		.kefu{
			vertical-align: middle;
			width: 25px;
			height: 25px;
		}
		.list{
			li{
				&:last-child{
					border-bottom:none;
				}
			}
		}
	}
</style>
